import { Button, Card, Form, Select,Input, message } from 'antd'
import Table, { ColumnsType } from 'antd/lib/table'
import {SearchOutlined} from '@ant-design/icons';
import React, { useEffect, useState } from 'react'
import { HospitalListType, ProvinceList } from '@/api/hospital/model/hostpitalListTypes';
import { reqGetCityOrDistrictList, reqGetHospitalList, reqGetProvinceList, reqUpdateHospitalStatus } from '@/api/hospital/hospitalList';
import { useForm } from 'antd/lib/form/Form';
import { useNavigate } from 'react-router-dom';
const { Option } = Select;
export default function HospitalList() {

  // 声明 医院列表状态
  let [hospital,setHospital] = useState<HospitalListType>([])

  // 声明 当前页码
  let [current,setCurrent] = useState(1);

  // 声明 每页条数
  let [pageSize,setPagesize] = useState(5);

  //声明总数
  let [total,setTotal] = useState(0);

  //loading 加载状态
  let [loading,setLoading] = useState(false)

  //声明 省份状态
  let [province,setProvince] = useState<ProvinceList>([]);


  //声明 市 状态
  let [city,setCity] = useState<ProvinceList>([]);

  // 声明 区 状态
  let [district,setDistrict] = useState<ProvinceList>([]);

  // 声明 医院类型 状态
  let [hostype,setHostype] = useState<ProvinceList>([]);

  // 声明  表单  hook
  let [form] = useForm();

  //编程式路由
  let navigate = useNavigate();

  //点击 submit 按钮提交表单方法
  let  finish = ()=>{
    //调用 获取医院列表 方法
    gethospital();
  }

  //清空表单 数据
  let reset =()=>{
    //清空state状态
    setCity([]);
    setDistrict([]);
    // 重新请求 医院列表 api
    gethospital()
  }


  //分页 
  let change = (page:number,pageSize:number)=>{
    // 设置当前页码
    setCurrent(page);
    // 设置每页展示数量
    setPagesize(pageSize)
  }


  //声明 请求 医院列表的api 方法
  let gethospital = async ()=>{
    //获取医院列表搜索 表单数据
    let searchHospital = form.getFieldsValue();
    //设置loading展示
    setLoading(true);
    //请求api数据
    let result = await reqGetHospitalList({page:current,limit:pageSize,...searchHospital});
    //关闭loading
    setLoading(false)
    //设置医院列表数据
    setHospital(result.content);
    //设置总数
    setTotal(result.totalElements)
  }


  //省份变化 获取市信息
  let provincechange = async (value:any)=>{
        // console.log(value);

    //清空 市 的表单数据
    form.setFieldsValue({cityCode:undefined,districtCode:undefined});
    // 请求 市 api 获取数据
    let result = await reqGetCityOrDistrictList(value);
    //获取市状态
    setCity(result)
  }


  //市变化 获取区信息
  let citychange = async(value:any)=>{
    //清空 区 的表单数据  
    form.setFieldsValue({districtCode:undefined});
    //请求api 获取 区数据
    let result = await
    reqGetCityOrDistrictList(value);
    // 设置区 数据
    setDistrict(result);
  }


  //模拟生命周期 初始化医院列表数据
  useEffect(()=>{
    // 调用 请求医院列表的方法
    gethospital()
  },[current,pageSize])


  // 生命周期  获取 省份信息
  useEffect(()=>{
    async function main(){
      let result = await reqGetProvinceList();
      setProvince(result)
    }
    main();
  },[])


  // 生命周期 获取医院类型信息
    useEffect(()=>{
      async function main(){
        // 请求 医院类型 api
        let result = await reqGetCityOrDistrictList(10000);
        // 设置医院类型数据
        setHostype(result)
      };
      main()
  },[])

  //更新医院上下限
  let changestatus = (id:string,status:0|1)=>{
    return async ()=>{
      // 取反 医院状态 
      status = status === 0 ? 1 : 0;

      await reqUpdateHospitalStatus({id,status});
      message.success('更新成功');
      
      //重新请求api
      gethospital();
    }
  }  











  //表格 表头信息
  let columns:ColumnsType<any> = [
    {
          title:"序号",
          render:(text:any,row:any,index:number)=>{
            return index+1;
          },
          align:"center",
          width:60
    },
    {
      title:'医院logo',
      dataIndex:'logoData',
      render:(text:any)=>{
        return<img width="80px" src={`data:image/jpeg;base64,${text}`} alt="" />
      },
      align:'center'
    },
    {
      title:'医院名称',
      dataIndex:'hosname',
      align:'center',
    },
    {
      title:'等级',
      dataIndex:'param',
      align:'center',
      render:(text:any)=>{
        return<span>{text.hostypeString}</span>
      }
    },
    {
      title:'详细地址',
      dataIndex:'param',
      align:'center',
      render:(text:any)=>{
        return <span>{text.fullAddress}</span>
      }
    },
    {
      title:'状态',
      dataIndex:'status',
      align:'center',
      render:(text:any)=>{
        return (
          text === 1 ? <span>已上线</span> : <span style={{color:"red"}}>未上线</span>
        )
      }
    },
    {
      title:'创建时间',
      align:'center',
      dataIndex:'creatTime'
    },
    {
      title:'操作',
      fixed:'right',
      align:'center',
      width:200,
      render:(row)=>{
        return(
          <div>
          <Button onClick={()=>{
            
              navigate(`/syt/hospital/hospitalList/show/${row.id}`)
          }} size="small" type="primary">查看</Button>
          <Button onClick={()=>{navigate(`/syt/hospital/hospitalList/schedule/${row.hoscode}`);}} size="small" className='ml' type="primary">排班</Button>
          {
            row.status === 0 ?<Button onClick={changestatus(row.id,row.status)} size="small" className='ml' type="primary">上线</Button>:<Button onClick={changestatus(row.id,row.status)} size="small" className='ml' type="primary">下线</Button>
          }
        </div>
        )
      }
    }
  ]
      
    
  



  return (
    <>
      <Card>
        {/* 搜索表单 */}
        <Form
        form={form}
          onFinish={finish}
          layout='inline'
          onReset={reset}
        >
          <Form.Item
            name="provinceCode"
          >
            <Select onChange={provincechange} placeholder='请输入省' style={{width:180}}>
                  {
                   province.map(item=>{
                    return <Option key={item.id} value={item.value}>{item.name}</Option>
                    })
                  }  
            </Select>



          </Form.Item>

          <Form.Item
                  name="cityCode"
                >
                    <Select onChange={citychange}  placeholder="请输入市" style={{ width: 180 }} >
                    {
                      city.map(item=>{
                              return  <Option key={item.id} value={item.value}>{item.name}</Option>
                      })
                    }
                    </Select>
              </Form.Item>

              <Form.Item
                  name="districtCode"
                >
                    <Select  placeholder="请输入区" style={{ width: 180 }} >
                    {
                      district.map(item=>{
                              return  <Option key={item.id} value={item.value}>{item.name}</Option>
                      })
                    }
                    </Select>
              </Form.Item>

                <Form.Item
                  name="hosname"
                >
                  <Input placeholder='医院名称' />
                </Form.Item>

                <Form.Item
                  name="hoscode"
                >
                  <Input placeholder='医院编号' />
                </Form.Item>

                <Form.Item
                  className='mt'
                  name="hostype"
                >
                    <Select  placeholder="医院类型" style={{ width: 180 }} >
                          
                         {
                          hostype.map(item =>{
                            return <Option value={item.value} key={item.id}>{item.name}</Option>
                          })
                         }
                    </Select>
              </Form.Item>

              <Form.Item
                  className='mt'
                  name="status"
                >
                    <Select  placeholder="医院状态" style={{ width: 180 }} >
                          <Option value="1">已上线</Option>
                          <Option value="0">未上线</Option>
                         
                    </Select>
              </Form.Item>
                
                <Form.Item className='mt' >
                
                  <Button icon={<SearchOutlined/>} type="primary" htmlType="submit">
                    查询
                  </Button>
                </Form.Item>

                <Form.Item className='mt'>
                  <Button type="default" htmlType="reset">
                    清空
                  </Button>
                </Form.Item>

        </Form>


        {/* 表格数据列表 */}
        <Table 
              loading={loading}
              className='mt'
              columns={columns}
              dataSource={hospital}
              rowKey="id"
              scroll={{x:1200}}
              pagination={{
                current,  //当前页码
                pageSize,  //每页条数
                total,  //总数
                showQuickJumper:true,   //是否可以快速跳转至某页
                pageSizeOptions:[5,8,10,15],   //指定每页可以显示多少条
                showSizeChanger:true, // 是否展示 pageSize 切换器
                showTotal:(total: number)=>{
                    return <p>当前总数{total}条</p>
                },
                onChange:change
              }}
             ></Table>
      </Card>
    </>
  )
}
